<template>
  <div>
    <h1>【aty-pagination】 component demo</h1>
    <p>【aty-pagination】 本质</p>
    <aty-row class="fd-category">
      <aty-title level="4">1. pagination 基本 </aty-title>
      <aty-row>
        <aty-pagination :total="1" :show-one-page="true" />
      </aty-row>
      <aty-title level="4">2. pagination 每页数量  </aty-title>
      <aty-row>
        <aty-pagination :total="100" show-sizer :offset="offset" />
      </aty-row>
      <aty-title level="4">3. pagination 电梯  </aty-title>
      <aty-row>
        <aty-pagination :total="100" show-elevator />
      </aty-row>
      <aty-title level="4">4. pagination 总数  </aty-title>
      <aty-row>
        <aty-pagination :total="100" show-total />
      </aty-row>
      <aty-title level="4">5. pagination 迷你型  </aty-title>
      <aty-row class="fd-simple">
        <aty-pagination :total="100" size="small" />
        <aty-pagination :total="100" size="small" show-sizer :limit-opts="limitOpts" :limit="2" />
        <aty-pagination :total="100" size="small" show-elevator />
        <aty-pagination :total="100" size="small" show-total />
      </aty-row>
      <aty-title level="4">6. pagination 简洁  </aty-title>
      <aty-row>
        <aty-pagination :offset="0" :total="50" size="small" simple />
      </aty-row>
      <aty-title level="4">7. pagination 一条数据隐藏 </aty-title>
      <aty-row>
        <aty-pagination :total="1" :show-one-page="false" />
      </aty-row>
      <aty-title level="4">pagination 最少显示页数</aty-title>
      <aty-row>
        <aty-pagination  :total="1000" :least-pages="true"></aty-pagination>
      </aty-row>
      <aty-title level="4">pagination 事件</aty-title>
      <aty-row>
        <aty-pagination  :total="1000" @change="change" @page-size-change="showSizeChange" @exportdata="exportdata"
                         show-sizer exp-current-page></aty-pagination><br><br>
      </aty-row>
      <aty-title level="4">设置当前页</aty-title>
      <aty-row>
        <aty-pagination  :total="1000" :transfer="true" :current="2" show-sizer></aty-pagination><br><br>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      limitOpts: [4, 6, 8, 10, 15, 48, 75, 16, 49, 52],
      offset: 20,
      current: -2
    }
  },
  methods: {
    change: function (pageInfo) {
      Artery.message.info('当前页数 ' + (pageInfo.offset / pageInfo.limit + 1))
    },
    showSizeChange: function (pageSize) {
      Artery.message.info('当前 pageSize=' + pageSize)
    },
    exportdata: function (type) {
      Artery.message.info('你正在导出数据')
      setTimeout(() => {
        Artery.message.info('数据导出成功')
      }, 2000)
    },
  }
  //  components: { Alert, Icon }
}
</script>
<style  lang="less"  type="text/less"  scoped>
    .fd-category {
        margin:0 20px;
        >.aty-row {
             margin: 10px 0;
         }
         .fd-simple .aty-pagination {
             margin-bottom: 5px;
         }
    }
</style>
